<template>
  <div class="excel-window">
    <div class="window-header">
      <div class="window-title">
        <img src="@/assets/icons/excel.svg" class="app-icon" />
        <span>工作簿1 - Excel</span>
      </div>
      <div class="window-buttons">
        <span class="minimize">─</span>
        <span class="maximize">□</span>
        <span class="close" @click="$router.push('/')">×</span>
      </div>
    </div>

    <div class="menu-bar">
      <span>文件</span>
      <span>开始</span>
      <span>插入</span>
      <span>页面布局</span>
      <span>公式</span>
      <span>数据</span>
      <span>视图</span>
      <span>帮助</span>
    </div>

    <div class="formula-bar">
      <div class="name-box">
        <input type="text" value="A1" />
      </div>
      <div class="formula-input">
        <span class="fx">fx</span>
        <input type="text" placeholder="在此输入函数" />
      </div>
    </div>

    <div class="toolbar">
      <div class="tool-group">
        <button class="tool">
          <i class="fas fa-paste"></i>
          <span>粘贴</span>
        </button>
        <div class="divider"></div>
        <button class="tool">
          <i class="fas fa-cut"></i>
          <span>剪切</span>
        </button>
        <button class="tool">
          <i class="fas fa-copy"></i>
          <span>复制</span>
        </button>
      </div>

      <div class="tool-group">
        <select class="font-family">
          <option>微软雅黑</option>
          <option>宋体</option>
          <option>Arial</option>
        </select>
        <select class="font-size">
          <option>11</option>
          <option>12</option>
          <option>14</option>
        </select>
      </div>

      <div class="tool-group">
        <button class="tool">
          <i class="fas fa-bold"></i>
        </button>
        <button class="tool">
          <i class="fas fa-italic"></i>
        </button>
        <button class="tool">
          <i class="fas fa-underline"></i>
        </button>
      </div>

      <div class="tool-group">
        <button class="tool">
          <i class="fas fa-align-left"></i>
        </button>
        <button class="tool">
          <i class="fas fa-align-center"></i>
        </button>
        <button class="tool">
          <i class="fas fa-align-right"></i>
        </button>
      </div>

      <div class="tool-group">
        <button class="tool">
          <i class="fas fa-table"></i>
          <span>表格</span>
        </button>
        <button class="tool">
          <i class="fas fa-chart-bar"></i>
          <span>图表</span>
        </button>
      </div>
    </div>

    <div class="content">
      <div class="spreadsheet-overlay">
        <table>
          <thead>
            <tr>
              <th></th>
              <th>A</th>
              <th>B</th>
              <th>C</th>
              <th>D</th>
              <th>E</th>
              <th>F</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="row-header">1</td>
              <td>部门</td>
              <td>项目</td>
              <td>预算</td>
              <td>实际支出</td>
              <td>结余</td>
              <td>完成率</td>
            </tr>
            <tr>
              <td class="row-header">2</td>
              <td>技术部</td>
              <td>服务器升级</td>
              <td>50000</td>
              <td>48000</td>
              <td>=C2-D2</td>
              <td>=D2/C2</td>
            </tr>
            <tr>
              <td class="row-header">3</td>
              <td>市场部</td>
              <td>品牌推广</td>
              <td>100000</td>
              <td>95000</td>
              <td>=C3-D3</td>
              <td>=D3/C3</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="game-layer">
        <!-- 原有的游戏内容 -->
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.excel-window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  height: 80vh;
  background: white;
  border: 1px solid #999;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;

  .window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: #E9E9E9;
    border-bottom: 1px solid #DDD;
    
    .window-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      
      .app-icon {
        width: 16px;
        height: 16px;
      }
    }
    
    .window-buttons {
      display: flex;
      gap: 4px;
      
      span {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        
        &:hover {
          background: rgba(0, 0, 0, 0.1);
        }
      }
    }
  }

  .menu-bar {
    display: flex;
    gap: 16px;
    padding: 4px 8px;
    background: #F5F5F5;
    border-bottom: 1px solid #DDD;
    
    span {
      padding: 4px 8px;
      cursor: pointer;
      
      &:hover {
        background: #E5E5E5;
      }
    }
  }

  .formula-bar {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: #F5F5F5;
    border-bottom: 1px solid #DDD;

    .name-box {
      width: 80px;
      
      input {
        width: 100%;
        padding: 2px 4px;
        border: 1px solid #DDD;
      }
    }

    .formula-input {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 4px;
      
      .fx {
        padding: 2px 4px;
        background: #E8E8E8;
        border: 1px solid #DDD;
      }
      
      input {
        flex: 1;
        padding: 2px 4px;
        border: 1px solid #DDD;
      }
    }
  }

  .toolbar {
    display: flex;
    gap: 16px;
    padding: 8px;
    background: #F5F5F5;
    border-bottom: 1px solid #DDD;
    
    .tool-group {
      display: flex;
      gap: 4px;
      padding-right: 16px;
      border-right: 1px solid #DDD;
      align-items: center;
      
      &:last-child {
        border-right: none;
      }
    }
    
    .tool {
      padding: 4px;
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      font-size: 12px;
      
      &:hover {
        background: #E5E5E5;
      }
      
      i {
        font-size: 16px;
      }
    }
    
    .divider {
      width: 1px;
      height: 20px;
      background: #DDD;
      margin: 0 4px;
    }
    
    select {
      padding: 2px 4px;
      border: 1px solid #DDD;
      border-radius: 2px;
      
      &.font-family {
        width: 120px;
      }
      
      &.font-size {
        width: 60px;
      }
    }
  }

  .content {
    position: relative;
    flex: 1;
    overflow: auto;
    background: white;

    .spreadsheet-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      pointer-events: none;

      table {
        border-collapse: collapse;
        width: 100%;
        
        th, td {
          border: 1px solid #DDD;
          padding: 4px 8px;
          font-size: 12px;
          color: #333;
          opacity: 0.8;
          
          &.row-header {
            background: #F5F5F5;
            text-align: center;
            width: 40px;
          }
        }
        
        th {
          background: #F5F5F5;
          text-align: center;
          font-weight: normal;
        }
      }
    }

    .game-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.3;
      z-index: 1;
    }
  }
}
</style> 